<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form
      :inline="true"
      class="demo-form-inline"
      v-if="hasPerm('event.query')"
    >
      <el-form-item>
        <el-input
          v-model="eventQuery.eventTitle"
          placeholder="事件名"
          clearable
        />
      </el-form-item>

      <el-form-item label="湖南地级市">
        <el-select v-model="eventQuery.city" clearable placeholder="请选择">
          <el-option
            v-for="city in cities"
            :key="city.value"
            :label="city.label"
            :value="city.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="添加时间">
        <el-date-picker
          v-model="eventQuery.begin"
          type="date"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="eventQuery.end"
          type="date"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>

      <el-button
        type="primary"
        icon="el-icon-search"
        @click="pageEventCondition()"
        >查询</el-button
      >
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row
      v-if="hasPerm('event.list')"
    >
      <el-table-column label="序号" width="110" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column
        prop="event_title"
        label="事件名称"
        width="110"
        align="center"
      />

      <el-table-column
        prop="start_time"
        label="发生时间"
        width="110"
        align="center"
      />

      <el-table-column
        prop="city"
        label="地级市"
        width="110"
        align="center"
      />

      <el-table-column
        prop="location"
        label="详细地址"
        width="110"
        align="center"
      />

      <el-table-column
        prop="end_time"
        label="结束时间"
        width="110"
        align="center"
      />

      <el-table-column prop="longitude" label="经度" width="110" align="center" />

      <el-table-column
        prop="latitude"
        label="纬度"
        width="110"
        align="center"
      />

      <el-table-column label="操作" min-width="300" align="center">
        <template slot-scope="scope">
          <router-link
            :to="'/event/event/' + scope.row.id"
            v-if="hasPerm('event.update')"
          >
            <el-button type="primary" size="mini" icon="el-icon-edit"
              >修改信息</el-button
            >
          </router-link>
          <router-link
            :to="'/event/description/' + scope.row.id"
            v-if="hasPerm('event.updateDesc')"
          >
            <el-button type="primary" size="mini" icon="el-icon-edit"
              >修改描述</el-button
            >
          </router-link>
          <router-link
            :to="'/event/summary/' + scope.row.id"
            v-if="hasPerm('event.updateSummary')"
          >
            <el-button type="primary" size="mini" icon="el-icon-edit"
              >修改总结</el-button
            >
          </router-link>
          <el-button
            v-if="hasPerm('event.remove')"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removEvent(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="pageEventCondition"
    />
  </div>
</template>

<script>
import events from "@/api/event/events";
import city from '@/api/option/city'
export default {
  data() {
    return {
      eventQuery: {
        //查询条件封装对象
        eventTitle: "",
        city: "",
        begin: "",
        end: "",
      },
      list: null, //查询后返回的数据
      page: 1, //当前页
      limit: 10, //每页记录数
      total: 0, //总记录数
      cities: [], //城市
    };
  },
  created() {
    this.getCities();
    this.pageEventCondition();
  },
  methods: {
    // 获得所有的城市列表
    getCities() {
      city.getCities().then((res) => {
        const cities = res.data.cities;
        cities.forEach((item) => {
          this.cities.push({
            lable: item.id,
            value: item.city,
          });
        });
      });
    },
    pageEventCondition(page = 1) {
      this.page = page;
      events
        .pageEventCondition(this.page, this.limit, this.eventQuery)
        .then((res) => {
          this.list = res.data.records;
          this.total = res.data.total;
        });
    },
    resetData() {
      this.eventQuery = {};
      this.pageEventCondition();
    },
    removEvent(eventId) {
      events.deleteEvent(eventId).then((res) => {
        this.$message({
          type: "success",
          message: res.message,
        });
        this.pageEventCondition();
      });
    },
  },
};
</script>

<style scoped>
</style>

